export default function Border() {
  return (
    <>
      <div className="grid grid-cols-5 gap-40 ml-12 mr-12">
        <div>边框圆角</div>
        <div className="h-20 w-30 bg-red-400 rounded-none shadow-inner"></div>
        <div className="h-20 w-30 bg-red-400 rounded-lg shadow-md"></div>
        <div className="h-20 w-30 bg-red-400 rounded-full shadow-2xl"></div>
        <div className="h-20 w-20 bg-red-400 rounded-full shadow"></div>
        <div>边框宽度</div>
        <div className="h-20 w-30 bg-blue-400 border-blue-800 border-0"></div>
        <div className="h-20 w-30 bg-blue-400 border-blue-800 border"></div>
        <div className="h-20 w-30 bg-blue-400 border-blue-800 border-4 border-opacity-80"></div>
        <div className="h-20 w-30 bg-blue-400 border-black border-l-2"></div>
        <div>边框样式</div>
        <div className="h-20 w-30 bg-green-400 border-4 border-double"></div>
        <div className="h-20 w-30 bg-green-400 border-4 border-solid"></div>
        <div className="h-20 w-30 bg-green-400 border-4 border-dashed"></div>
        <div className="h-20 w-30 bg-green-400 border-4 border-dotted"></div>
        <div>环轮廓厚度颜色</div>
        <div className="h-20 w-30 bg-yellow-400 rounded-lg ring-2 ring-offset-2"></div>
        <div className="h-20 w-30 bg-yellow-400 rounded-lg ring-4 ring-blue-400"></div>
        <div className="h-20 w-30 bg-yellow-400 rounded-lg ring-4 ring-offset-4 ring-offset-pink-300"></div>
        <div className="h-20 w-30 bg-yellow-400 rounded-lg ring-4 ring-offset-2 ring-opacity-40"></div>
      </div>
    </>
  )
}